<template>
	<view>
		<view class="uni-tab-bar" style="background-color: #fff;">
			<scroll-view scroll-x class="uni-swiper-tab" style="border-bottom: none;">
				<block v-for="(tab,index) in tabBars" :key="tab.id">
					<view 
						class="swiper-tab-list" 
						:class="{'active':tabIndex == index}"
						@click="tabClick(index)"
					>
						{{tab.name}}
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="uni-tab-bar">
			<swiper 
				class="swiper-box" 
				:style="{'height':swiperHeight+'px'}"
				:current="tabIndex"
				@change="tabChange"
			>
				<swiper-item v-for="(items,indexs) in newsList" :key="indexs">
					<scroll-view scroll-y class="list">
						<block v-for="(item,index) in items.list" :key="index">
							<index-list :item="item" :src="src" :index="index"></index-list>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue"
	export default {
		components:{
			indexList
		},
		data() {
			return {
				swiperHeight:573,
				tabIndex:0,
				tabBars:[],
				newsList:[],
				src:'',
				token:'',//onShow时获取token存起来，以便每次发送请求都要重新获取
			}
		},
		async onShow(){
			if(this.type_==2){
				AlipayJSBridge.call('setTitle', {
				      title: '专注卡券回收服务—卖卡啦'
				    });
			}
			let _this = this
			let list = []
			// this.src = this.url
			let id = uni.getStorageSync('card1Id')
			this.token = uni.getStorageSync('token')
			if(this.token){
				if(id){
					await uni.request({
						url: this.url + '/mobile/cardListData',
						method:'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded' ,// 默认值
							'token':this.token
						},
						data:{
							type:_this.sourceType,
							// type:4,//抖音
							commodityClassId:id
						},
						success: (res) => {
							list = res.data.data
						}
					})
				}else{
					this.tabIndex = 0
				}
				await uni.request({
					url: this.url + '/mobile/classificationData',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,// 默认值
						'token':this.token
					},
					data:{
						type:_this.sourceType
						// type:4//抖音
					},
					success: (res) => {
						console.log(res);
						this.tabBars = res.data.data.classList
						this.tabBars.forEach(function(value,index){
							_this.newsList[index] = {
								list:[]
							}
							if(id == value.id){
								_this.newsList[index].list = list
								_this.tabIndex = index
							}
						})
						this.newsList[0].list = res.data.data.commodityList
					}
				})
			}else{
				if(_this.type_==1){
					uni.navigateTo({
						url: '../login/login'
					});
					
				}
				uni.login({
					provider: 'weixin',
					success: function (res) {
						console.log(res.code);
						uni.request({
							url: _this.url + '/applet/getSessionKey',
							method:'GET',
							header: {
								'content-type': 'application/x-www-form-urlencoded' ,// 默认值
							},
							data:{
								code:res.code
							},
							success: (res) => {
								console.log(res)
								uni.setStorageSync('token',res.data.data.token)
								_this.token = res.data.data.token
								uni.request({
									url: _this.url + '/mobile/classificationData',
									method:'POST',
									header: {
										'content-type': 'application/x-www-form-urlencoded' ,// 默认值
										'token':res.data.data.token
									},
									data:{
										type:_this.type_
										// type:4//抖音
									},
									success: (res) => {
										console.log(res);
										_this.tabBars = res.data.data.classList
										_this.tabBars.forEach(function(value,index){
											if(id == value.id){
												_this.tabIndex = index
												uni.removeStorageSync('card1Id')
											}
											_this.newsList[index] = {
												list:[]
											}
										})
										_this.newsList[0].list = res.data.data.commodityList
									}
								})
							},
						})
					}
				});


			}
			
		},
		methods: {
			tabClick(index){//顶部tabBar点击事件
				// this.tabIndex = index
				console.log(this.tabIndex)
				uni.request({
					url: this.url + '/mobile/cardListData',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,// 默认值
						'token':this.token
					},
					data:{
						type:this.type_,
						// type:4,//抖音
						commodityClassId:this.tabBars[index].id
					},
					success: (res) => {
						console.log(res);
						this.newsList[index].list = res.data.data
						console.log(this.newsList[index].list)
						this.tabIndex = index
					}
				})
			},
			tabChange(e){//滑动切换页面
				uni.request({
					url: this.url + '/mobile/cardListData',
					method:'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded' ,// 默认值
						'token':this.token
					},
					data:{
						type:this.type_,
						// type:4,//抖音
						commodityClassId:this.tabBars[e.detail.current].id
					},
					success: (res) => {
						console.log(res);
						this.newsList[e.detail.current].list = res.data.data
						console.log(this.newsList[e.detail.current].list)
						this.tabIndex = e.detail.current
					}
				})
			}
		},
		onLoad(){
			uni.getSystemInfo({
			    success:(res)=>{//es5语法不生效
			        console.log(res.windowHeight);
					let height = res.windowHeight-uni.upx2px(100)
					this.swiperHeight = height
			    }
			});
		},
	}
</script>

<style>
	.uni-tab-bar .swiper-tab-list{
		width: 130upx;
		border-radius: 40upx;
		margin: 0 10upx;
	}
	.active{
		color: #fff !important;
		background-color: #F18F02;
	}
</style>
